<template>
  <div>
    <cus-modal
      ref="modal"
      title="军粮差价补贴"
      cancelBtnName="关闭"
      :showOkBtn="false"
      @on-visible-change="onVisibleChange"
      width="90"
      marginTop="40px"
      @onOk="onOk"
    >
      <Table border :loading="loading" :columns="columns" :data="data">
        <template slot-scope="{ row, index }" slot="project">
          <div class="slotBox" v-if="data[index].value">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <div style="width:100%">
                <div>{{ item.districtCode }}</div>
                <!-- <div>(元 / 千克)</div> -->
              </div>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="rice">
          <div class="slotBox" v-if="data[index].value">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <div style="width:100%;text-align:left;padding:0 10px">
                <div>推荐：{{ item.standardRice }}</div>
                <div style="display:flex;align-items:center">
                  <div>标准：</div>
                  <InputNumber
                    :min="0"
                    :max="10000"
                    :precision="2"
                    :active-change="false"
                    v-model="item.rice"
                    v-if="data[index].value[idx].isEdit"
                  ></InputNumber>
                  <div v-else>{{ item.rice }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="wheatmeal">
          <div class="slotBox" v-if="data[index].value">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <div style="width:100%;text-align:left;padding:0 10px">
                <div>推荐：{{ item.standardWheatmeal }}</div>
                <div style="display:flex;align-items:center">
                  <div>标准：</div>
                  <InputNumber
                    :min="0"
                    :max="10000"
                    :precision="2"
                    :active-change="false"
                    v-model="item.wheatmeal"
                    v-if="data[index].value[idx].isEdit"
                  ></InputNumber>
                  <div v-else>{{ item.wheatmeal }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="soybean">
          <div class="slotBox" v-if="data[index].value">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <div style="width:100%;text-align:left;padding:0 10px">
                <div>推荐：{{ item.standardSoybean }}</div>
                <div style="display:flex;align-items:center">
                  <div>标准：</div>
                  <InputNumber
                    :min="0"
                    :max="10000"
                    :precision="2"
                    :active-change="false"
                    v-model="item.soybean"
                    v-if="data[index].value[idx].isEdit"
                  ></InputNumber>
                  <div v-else>{{ item.soybean }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="horseFodder">
          <div class="slotBox" v-if="data[index].value">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <div style="width:100%;text-align:left;padding:0 10px">
                <div>推荐：{{ item.standardHorseFodder }}</div>
                <div style="display:flex;align-items:center">
                  <div>标准：</div>
                  <InputNumber
                    :min="0"
                    :max="10000"
                    :precision="2"
                    :active-change="false"
                    v-model="item.horseFodder"
                    v-if="data[index].value[idx].isEdit"
                  ></InputNumber>
                  <div v-else>{{ item.horseFodder }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="dogFeed">
          <div class="slotBox" v-if="data[index].value">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <div style="width:100%;text-align:left;padding:0 10px">
                <div>推荐：{{ item.standardDogFeed }}</div>
                <div style="display:flex;align-items:center">
                  <div>标准：</div>
                  <InputNumber
                    :min="0"
                    v-model="item.dogFeed"
                    :max="10000"
                    :precision="2"
                    :active-change="false"
                    v-if="data[index].value[idx].isEdit"
                  ></InputNumber>
                  <div v-else>{{ item.dogFeed }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="pigeonStuff">
          <div class="slotBox" v-if="data[index].value">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <div style="width:100%;text-align:left;padding:0 10px">
                <div>推荐：{{ item.standardPigeonStuff }}</div>
                <div style="display:flex;align-items:center">
                  <div>标准：</div>
                  <InputNumber
                    :min="0"
                    :max="10000"
                    :precision="2"
                    :active-change="false"
                    v-model="item.pigeonStuff"
                    v-if="data[index].value[idx].isEdit"
                  ></InputNumber>
                  <div v-else>{{ item.pigeonStuff }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="peanutOil">
          <div class="slotBox" v-if="data[index].value">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <div style="width:100%;text-align:left;padding:0 10px">
                <div>推荐：{{ item.standardPeanutOil }}</div>
                <div style="display:flex;align-items:center">
                  <div>标准：</div>
                  <InputNumber
                    :min="0"
                    :max="10000"
                    :precision="2"
                    :active-change="false"
                    v-model="item.peanutOil"
                    v-if="data[index].value[idx].isEdit"
                  ></InputNumber>
                  <div v-else>{{ item.peanutOil }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="rapeseedOil">
          <div class="slotBox" v-if="data[index].value">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <div style="width:100%;text-align:left;padding:0 10px">
                <div>推荐：{{ item.standardRapeseedOil }}</div>
                <div style="display:flex;align-items:center">
                  <div>标准：</div>
                  <InputNumber
                    :min="0"
                    :max="10000"
                    :precision="2"
                    :active-change="false"
                    v-model="item.rapeseedOil"
                    v-if="data[index].value[idx].isEdit"
                  ></InputNumber>
                  <div v-else>{{ item.rapeseedOil }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="oilveOil">
          <div class="slotBox" v-if="data[index].value">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <div style="width:100%;text-align:left;padding:0 10px">
                <div>推荐：{{ item.standardOilveOil }}</div>
                <div style="display:flex;align-items:center">
                  <div>标准：</div>
                  <InputNumber
                    :min="0"
                    :max="10000"
                    :precision="2"
                    :active-change="false"
                    v-model="item.oilveOil"
                    v-if="data[index].value[idx].isEdit"
                  ></InputNumber>
                  <div v-else>{{ item.oilveOil }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="soyaOil">
          <div class="slotBox" v-if="data[index].value">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <div style="width:100%;text-align:left;padding:0 10px">
                <div>推荐：{{ item.standardSoyaOil }}</div>
                <div style="display:flex;align-items:center">
                  <div>标准：</div>
                  <InputNumber
                    :min="0"
                    :max="10000"
                    :precision="2"
                    :active-change="false"
                    v-model="item.soyaOil"
                    v-if="data[index].value[idx].isEdit"
                  ></InputNumber>
                  <div v-else>{{ item.soyaOil }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="operation">
          <div class="slotBox">
            <div
              class="slotBox-item"
              v-for="(item, idx) in data[index].value"
              :key="idx"
              :class="{ noBorderB: idx + 1 == data[index].value.length }"
            >
              <div class="flex">
                <cus-button
                  type="text"
                  size="small"
                  :style="{ color: '#1E6FFF', padding: '0 8px' }"
                  @onClick="
                    data[index].value[idx].isEdit = !data[index].value[idx]
                      .isEdit
                  "
                  v-if="data[index].value[idx].isEdit == false"
                >
                  编辑
                </cus-button>
                <cus-button
                  type="text"
                  size="small"
                  :style="{ color: 'gray', padding: '0 8px' }"
                  @onClick="
                    data[index].value[idx].isEdit = false;
                    priceDifferenceApi();
                  "
                  v-if="data[index].value[idx].isEdit == true"
                >
                  取消
                </cus-button>
                <cus-button
                  type="text"
                  size="small"
                  :style="{ color: 'green', padding: '0 8px' }"
                  @onClick="saveChange(item)"
                  v-if="data[index].value[idx].isEdit == true"
                >
                  保存
                </cus-button>
              </div>
            </div>
          </div>
        </template>
      </Table>
      <div style="color:gray;margin-top:10px">
        * 提示：修改标准若带有小数，将自动取整。
      </div>
    </cus-modal>
  </div>
</template>

<script>
import {
  priceDifference,
  savePriceDifference
} from "@/api/business/dishesModule";

export default {
  name: "armyRiceStandardModal",
  data() {
    return {
      columns: [
        {
          title: "",
          key: "name",
          align: "center"
        },
        {
          title: "类别",
          slot: "project",
          align: "center"
        },
        {
          slot: "rice",
          align: "center",
          title: "",
          renderHeader: (h, params) => {
            let text = "大米 <br/> 推荐 / 标准 <br/>(元 / 千克)";
            return h("div", {
              domProps: {
                innerHTML: text
              }
            });
          }
        },
        {
          slot: "wheatmeal",
          align: "center",
          renderHeader: (h, params) => {
            let text = "小麦粉 <br/> 推荐 / 标准 <br/>(元 / 千克)";
            return h("div", {
              domProps: {
                innerHTML: text
              }
            });
          }
        },
        {
          slot: "soyaOil",
          align: "center",
          renderHeader: (h, params) => {
            let text = "大豆油 <br/> 推荐 / 标准 <br/>(元 / 千克)";
            return h("div", {
              domProps: {
                innerHTML: text
              }
            });
          }
        },
        {
          slot: "soybean",
          align: "center",
          renderHeader: (h, params) => {
            let text = "黄豆 <br/> 推荐 / 标准 <br/>(元 / 千克)";
            return h("div", {
              domProps: {
                innerHTML: text
              }
            });
          }
        },
        {
          slot: "horseFodder",
          align: "center",
          renderHeader: (h, params) => {
            let text = "马料 <br/> 推荐 / 标准 <br/>(元 / 千克)";
            return h("div", {
              domProps: {
                innerHTML: text
              }
            });
          }
        },
        {
          slot: "dogFeed",
          align: "center",
          renderHeader: (h, params) => {
            let text = "犬料 <br/> 推荐 / 标准 <br/>(元 / 千克)";
            return h("div", {
              domProps: {
                innerHTML: text
              }
            });
          }
        },
        {
          slot: "pigeonStuff",
          align: "center",
          renderHeader: (h, params) => {
            let text = "鸽料 <br/> 推荐 / 标准 <br/>(元 / 千克)";
            return h("div", {
              domProps: {
                innerHTML: text
              }
            });
          }
        },
        {
          slot: "peanutOil",
          align: "center",
          renderHeader: (h, params) => {
            let text = "花生油 <br/> 推荐 / 标准 <br/>(元 / 千克)";
            return h("div", {
              domProps: {
                innerHTML: text
              }
            });
          }
        },
        {
          slot: "oilveOil",
          align: "center",
          renderHeader: (h, params) => {
            let text = "橄榄油 <br/> 推荐 / 标准 <br/>(元 / 千克)";
            return h("div", {
              domProps: {
                innerHTML: text
              }
            });
          }
        },
        {
          slot: "rapeseedOil",
          align: "center",
          renderHeader: (h, params) => {
            let text = "菜籽油 <br/> 推荐 / 标准 <br/>(元 / 千克)";
            return h("div", {
              domProps: {
                innerHTML: text
              }
            });
          }
        },
        {
          title: "操作",
          width: 150,
          fixed: "right",
          slot: "operation",
          align: "center"
        }
      ],
      data: [
        {
          name: "军粮差价补贴",
          isEdit: false,
          value: []
        }
      ],
      loading: false
    };
  },
  mounted() {
    // this.form = this.$cu.deepClone(form);
  },
  methods: {
    onVisibleChange(v) {
      if (!v) {
        // this.form = this.$cu.deepClone(form)
      }
    },
    show() {
      this.$refs["modal"].show = true;
      this.priceDifferenceApi();
    },
    onOk() {},
    // 保存
    saveChange(item) {
      console.log(item);
      this.loading = true;
      return new Promise(resolve => {
        savePriceDifference(item).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            this.$Message.success("修改成功.");
            this.priceDifferenceApi();
            resolve();
          }
        });
      });
    },
    // 查询定量标准
    priceDifferenceApi() {
      this.loading = true;
      this.data[0].value = [];
      return new Promise(resolve => {
        priceDifference({}).then(res => {
          this.loading = false;
          if (res.retCode === 2000) {
            this.data[0].value = res.data.map(item => {
              item.isEdit = false;
              return item;
            });
            resolve();
          }
        });
      });
    }
  }
};
</script>
<style scoped>
/deep/.ivu-table-cell {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
</style>
<style scoped lang="less">
.slotBox {
  width: 100%;
  // padding: 5px 0;
  &-item {
    padding: 10px 0;
    border-bottom: 1px solid #e3e8ee;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.noBorderB {
  border-bottom: none !important;
}
</style>
